<template>
  <div>
    <my-simple-page
      :search-fields="searchFields"
      :edit-fields="editFields"
      :tableTitle="tableTitle"
      :columns="columns"
      :save-url="saveUrl"
      :search-url="searchUrl"
      :delete-url="deleteUrl">
    </my-simple-page>
  </div>
</template>

<script>
  export default {
    name: "plan-index",
    data(){
      return{
        searchFields: [
          {
            type: 'input',
            label: '内容',
            prop: 'content'
          },{
            type: 'select',
            label: '状态',
            prop: 'status',
            dict: 'PLAN_STATUS_DICT',
          },{
            type: 'date',
            label: '创建时间',
            prop: 'createTime'
          }
        ],
        tableTitle: '计划列表',
        columns: [
          {label:'标题',prop: 'title',width:'200'},
          {label:'内容',prop: 'content'},
          {label:'星级',prop: 'star',render: this.renderStar,width:'120'},
          {label:'创建时间',prop: 'createTime',width:'200'},
          {label:'计划用时(天)',prop: 'planDay',width:'80'},
          {label:'状态',prop: 'status',width:'80',render: this.renderStatus}],
        editFields: [
          {
            type: 'input',
            label: '标题',
            prop: 'title',
            rules:{ required: true, message: '标题不能为空', trigger: 'blur' }
          },
          {
            type: 'rate',
            label: '星级',
            prop: 'star',
          },
          {
            type: 'number',
            label: '计划用时',
            prop: 'planDay'
          },
          {
            type: 'textarea',
            label: '计划内容',
            prop: 'content',
            rules:{ required: true, message: '计划内容不能为空', trigger: 'blur' }
          },
          {
            type: 'select',
            label: '状态',
            dict: 'PLAN_STATUS_DICT',
            prop: 'status',
          }
        ],
        searchUrl: '/api/study/plan/getPlanList',
        saveUrl: '/api/study/plan/savePlan',
        deleteUrl: '/api/study/plan/deletePlan',
        statusDict: [],
      }
    },
    methods:{
      renderStar(val){
        let color = (val<3?'#99A9BF':(val>3?'#FF9900':'#F7BA2A'));
        let html = "<div style='color: "+ color +"'>";
        for(let i=0;i<val;i++){
          html += '<i class="el-icon-star-on"></i>'
        }
        html += '</div>';
        return html;
      },
      renderStatus(val){
        for(let item of this.statusDict){
          if (item.value == val){
            return item.label;
          }
        }
      },
    },
    created(){
      this.$ajax.getDict('PLAN_STATUS_DICT').then(res=>{
        this.statusDict = res;
      });
    }
  }
</script>

<style scoped>

</style>
